<template>
  <div>
    <!-- <van-tabs v-model="active" v-for="item in FenArr" :key="item.id">
      <van-tab :title='item.name'>内容 1</van-tab>
    </van-tabs> -->
    <van-tabs  v-model="active" @click="tiskfn">
      <van-tab
        v-for="item in FenArr"
        :key="item.id"
        :title="item.name"
      >
        <div>
          <div class="on1">
            <h4>{{ item.name }}</h4>
            <h5>{{ item.front_name }}</h5>
          </div>
          <ul>
            <li v-for="item in filtArr" :key="item.id" @click="tiaofn(item)">
              <img :src="item.list_pic_url" alt="" />
              <p>{{ item.name }}</p>
              <span>{{ item.retail_price }}</span>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Gird1Fn, Gird2Fn } from "@/utils/http";
export default {
  name: "Fen",
  data() {
    return {
      active: 'a', //绑定当前激活标签对应的索引值，默认情况下启用第一个标签
      FenArr: [], //分类标题
      filtArr: [], //下方数据
      Id: "",
    };
  },
  created() {
    Gird1Fn({ id: this.$route.query.id }).then((res) => {
      console.log(res);
      this.FenArr = res.data.data.brotherCategory;
      this.Id = res.data.data.currentCategory.id;
      this.FenArr.forEach((item,index)=>{
        if(this.$route.query.id==item.id){  
          this.active=index;
          console.log(this.active);
        }
      })
      this. Getday(this.Id)
    });
    
  },
  methods: {
    tiskfn(a, b) {
      console.log(a, "点击了", b);
      this.FenArr.forEach((item) => {
        console.log(item);
        if (item.name == b) {
          this.Id = item.id;
        }
      });
      this.Getday(this.Id)
    },
    Getday(id) {
      Gird2Fn({ categoryId: id, page: 1, size: 10 }).then(
        (res) => {
          console.log(res);
          this.filtArr = res.data.data.goodsList;
        }
      );
    },
    //跳转
    tiaofn(item){
        this.$router.push({ path:"/xiangqing",query:{id:item.id} });
    }
  },
};
</script>

<style lang='less' scope>
.on1 {
  text-align: center;
  h5 {
    line-height: 34px;
    font-size: 15px;
  }
  h4 {
    line-height: 34px;
    font-size: 18px;
  }
  margin-bottom: 20px;
}
ul {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 50%;
    font-size: 16px;
    text-align: center;
    img {
      width: 100%;
      display: block;
    }
  }
}
</style>